<template>
    <div id="mirror-manage">
        <div class="search-box">
            <el-form :inline="true" ref="searchForm" :model="searchForm">
                <el-form-item label="教师每门课程最大镜像保存数：">
                    <el-input-number v-model="searchForm.saveNum" controls-position="right" @change="handleChange" :min="1" :max="999"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="SaveFn">保 存</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="jx-manage-tips">
            <p>提示 : </p>
            <p>1.该功能用于控制教师私有镜像最大保存数量，超出该值则教师新镜像无法保存。 </p>
            <p>2.教师过多的保存镜像将会占用服务器大量的存储资源，请谨慎设置。</p>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                searchForm: {
                    saveNum: ''
                }
            }
        },
        created () {
            let self = this
            self.InitQuota()
        },
        methods: {
            InitQuota(){
                let self = this
                self.$http.get('/tes/image/quota').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.searchForm.saveNum = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            handleChange(value) {
                console.log(value);
            },
            // 保存镜像数
            SaveFn() {
                let self = this
                self.$http.put('/tes/image/quota',{
                    imageQuota: self.searchForm.saveNum
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>
<style scoped>
    .el-input-number.is-controls-right>>>.el-input-number__increase{
        line-height: 15px;
    }
    .el-input-number{
        position: relative;
        display: inline-block;
        line-height: 32px;
        overflow: hidden;
        width: auto;
    }
    .el-input-number>>>.el-input-number__increase{
        top: 1px;
        right: 12px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__decrease{
        bottom: 1px;
        right: 12px;
    }
    .el-input-number>>>.el-input .el-input__inner{
        width: 100px;
    }
</style>
<style scoped lang="scss">
    #mirror-manage{
        // 搜索样式
        .search-box{
            margin-top: 30px;
        }
        .el-input-number{
            width: 110px;
            height: 32px;
            line-height: 32px;
            &.is-controls-right{
                .el-input-number__increase{
                    height: 16px;
                    line-height: 16px;
                }
            }
            .el-input{
                width: 110px;
                input{
                    width: 110px;
                }
            }
        }
        .jx-manage-tips{
            width: 80%;
            margin-top: 10px;
            p{
                font-size: 14px;
                color: #1277eb;
                line-height: 24px;
            }
        }
    }
</style>

